import React, { useState, useEffect, useRef, memo } from 'react';
import { Calendar } from 'zarm';
import styles from './index.less';

const CalendarCp = function(props: any) {
  const { time, range, color, selectedColor, round } = props;

  const realRange = range.split('-');

  const [value, setValue] = useState<Date[] | undefined>([
    new Date(`${time}-${realRange[0]}`),
    new Date(`${time}-${realRange[1]}`),
  ]);
  const [min] = useState(new Date(`${time}-01`));
  const [max] = useState(new Date(`${time}-31`));

  const boxRef = useRef<any>(null);

  useEffect(() => {
    if (boxRef.current) {
      boxRef.current.style.setProperty('--color', color);
      boxRef.current.style.setProperty('--selectColor', selectedColor);
      boxRef.current.style.setProperty('--selectBgColor', selectedColor);
    }
  }, []);

  const isEditorPage = window.location.pathname.indexOf('editor') > -1;

  return (
    <div
      className={styles.calenderWrap}
      style={{ borderRadius: round + 'px', pointerEvents: isEditorPage ? 'none' : 'initial' }}
      ref={boxRef}
    >
      <Calendar
        multiple={!!range}
        value={value}
        min={min}
        max={new Date(max)}
        disabledDate={(date: any) => /(0|6)/.test(date.getDay())}
        onChange={(value: Date[] | undefined) => {
          setValue(value);
        }}
      />
    </div>
  );
};

export default memo(CalendarCp);
